<script setup lang="ts">
import { ref } from 'vue'

const selectedFile = ref<File | null>(null)
const previewUrl = ref<string>('')
const isRecognizing = ref(false)
const recognitionResult = ref<string>('')

const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]

  if (file && file.type.startsWith('image/')) {
    selectedFile.value = file
    const reader = new FileReader()
    reader.onload = (e) => {
      previewUrl.value = e.target?.result as string
    }
    reader.readAsDataURL(file)
    recognitionResult.value = ''
  }
}

const recognizeImage = async () => {
  if (!selectedFile.value) return

  isRecognizing.value = true

  // 模拟AI识别过程
  await new Promise(resolve => setTimeout(resolve, 2000))

  // 模拟识别结果
  const mockResults = [
    '猫咪 - 置信度: 95%',
    '狗狗 - 置信度: 89%',
    '汽车 - 置信度: 92%',
    '建筑物 - 置信度: 87%',
    '人物 - 置信度: 93%',
    '风景 - 置信度: 88%'
  ]

  const randomResult = mockResults[Math.floor(Math.random() * mockResults.length)]
  recognitionResult.value = `识别结果: ${randomResult}`
  isRecognizing.value = false
}

const resetApp = () => {
  selectedFile.value = null
  previewUrl.value = ''
  recognitionResult.value = ''
  isRecognizing.value = false
}
</script>

<template>
  <div class="app">
    <header class="header">
      <h1 class="title">AI图像识别</h1>
      <p class="subtitle">上传图片，让AI为您识别图像内容</p>
    </header>

    <main class="main">
      <div class="upload-area" v-if="!previewUrl">
        <div class="upload-zone">
          <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
            <polyline points="7,10 12,15 17,10"/>
            <line x1="12" y1="15" x2="12" y2="3"/>
          </svg>
          <h3>选择图片上传</h3>
          <p>支持 JPG、PNG、GIF 格式</p>
          <input
            type="file"
            accept="image/*"
            @change="handleFileSelect"
            class="file-input"
          >
          <label class="upload-btn">
            选择文件
          </label>
        </div>
      </div>

      <div class="preview-area" v-if="previewUrl">
        <div class="image-container">
          <img :src="previewUrl" alt="Preview" class="preview-image">
        </div>

        <div class="action-buttons">
          <button
            @click="recognizeImage"
            :disabled="isRecognizing"
            class="recognize-btn"
          >
            <span v-if="!isRecognizing">🔍 开始识别</span>
            <span v-else>⏳ 识别中...</span>
          </button>

          <button @click="resetApp" class="reset-btn">
            🔄 重新选择
          </button>
        </div>

        <div v-if="recognitionResult" class="result-area">
          <h3>识别结果</h3>
          <p class="result-text">{{ recognitionResult }}</p>
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
.app {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}

.header {
  text-align: center;
  margin-bottom: 3rem;
}

.title {
  font-size: 3rem;
  color: white;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.main {
  max-width: 600px;
  margin: 0 auto;
}

.upload-area {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.upload-zone {
  text-align: center;
  border: 3px dashed #e2e8f0;
  border-radius: 15px;
  padding: 3rem;
  transition: all 0.3s ease;
  position: relative;
}

.upload-zone:hover {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
}

.upload-icon {
  width: 4rem;
  height: 4rem;
  color: #667eea;
  margin-bottom: 1rem;
}

.upload-zone h3 {
  font-size: 1.5rem;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.upload-zone p {
  color: #718096;
  margin-bottom: 1.5rem;
}

.file-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.upload-btn {
  background: #667eea;
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-btn:hover {
  background: #5a67d8;
  transform: translateY(-2px);
}

.preview-area {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.image-container {
  text-align: center;
  margin-bottom: 2rem;
}

.preview-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.action-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.recognize-btn, .reset-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.recognize-btn {
  background: #48bb78;
  color: white;
}

.recognize-btn:hover:not(:disabled) {
  background: #38a169;
  transform: translateY(-2px);
}

.recognize-btn:disabled {
  background: #a0aec0;
  cursor: not-allowed;
}

.reset-btn {
  background: #f7fafc;
  color: #4a5568;
  border: 2px solid #e2e8f0;
}

.reset-btn:hover {
  background: #edf2f7;
  transform: translateY(-2px);
}

.result-area {
  background: linear-gradient(135deg, #f6f9fc 0%, #e9ecef 100%);
  padding: 1.5rem;
  border-radius: 15px;
  text-align: center;
}

.result-area h3 {
  color: #2d3748;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.result-text {
  font-size: 1.1rem;
  color: #4a5568;
  font-weight: 600;
  background: white;
  padding: 1rem;
  border-radius: 10px;
  margin: 0;
}
</style>
